<!--
Copyright 2013 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Media Internals</title>
  <link rel="stylesheet" href="media_internals.css">
  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
</head>

<body>
  <cr-tab-box hidden>
    <div slot="tab">Players</div>
    <div slot="tab">Audio</div>
    <div slot="tab">Video Capture</div>
    <div slot="tab">Audio Focus</div>
    <div slot="tab">CDMs</div>
    <div slot="panel" id="players">
      <button id="save-log-button" title="Save all player logs into a file." style="display:none">Save log</button>
      <button id="hide-players-button" title="Hide all players in the current view." stype="display:inline-block">Hide players</button>
      <button id="copy-all-player-button">Copy all to clipboard</button>
      <div id="list-wrapper">
        <div id="player-list-wrapper">
          <h2>Recent Players</h2>
          <ul id="player-list" class="show-none-if-empty"></ul>
        </div>
      </div>
      <div class="property-wrapper">
        <h2>
          Player Properties
          <button class="copy-properties-button">Copy to clipboard</button>
        </h2>
        <table id="player-property-table">
          <thead>
            <tr>
              <th>Property</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <div id="log-wrapper">
        <h2>
          Log <input id="filter-text" type="text" placeholder="property filter">
          <button class="copy-log-button">Copy to clipboard</button>
        </h2>
        <table id="log">
          <thead>
            <tr>
              <th class="timestamp">Timestamp</th>
              <th>Property</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <ul id="graphs"></ul>
    </div>
    <div slot="panel" id="audio">
      <button id="copy-all-audio-button">Copy all to clipboard</button>
      <div>
        <h2>General Information</h2>
        <table id="general-audio-info-table">
          <thead>
            <tr>
              <th>Property</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <div id="audio-component-list-wrapper">
        <h2>Input Controllers</h2>
        <ul id="audio-input-controller-list" class="show-none-if-empty"></ul>
      </div>
      <div id="audio-component-list-wrapper">
        <h2>Output Controllers</h2>
        <ul id="audio-output-controller-list" class="show-none-if-empty"></ul>
      </div>
      <div id="audio-component-list-wrapper">
        <h2>Output Streams</h2>
        <ul id="audio-output-stream-list" class="show-none-if-empty"></ul>
      </div>
      <div class="property-wrapper">
        <h2>
          <span id="audio-property-name"></span> Properties
          <button class="copy-properties-button">Copy to clipboard</button>
        </h2>
        <table id="audio-property-table">
          <thead>
            <tr>
              <th>Property</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
    <div slot="panel" id="video-capture">
      <div id="video-capture-capabilities-wrapper">
        <h2>
          <span>Video Capture Device Capabilities</span>
          <button id="video-capture-capabilities-copy-button">
            Copy to clipboard
          </button>
        </h2>
        <table id="video-capture-capabilities-table">
          <thead>
            <tr>
              <th>Device Name</th>
              <th>Formats</th>
              <th>Capture API</th>
              <th>Pan-Tilt-Zoom</th>
              <th>Device ID</th>
            </tr>
          </thead>
          <tbody id="video-capture-capabilities-tbody" class="show-none-if-empty"></tbody>
        </table>
      </div>
    </div>
    <div slot="panel" id="audio-focus">
      <div id="list-wrapper">
        <h2>Active Sessions</h2>
        <ul id="audio-focus-session-list" class="show-none-if-empty"></ul>
      </div>
      <template id="audio-focus-session-row">
        <li>
          <label class="audio-focus-session">
            <span class="player-name"></span><br />
            <span class="player-frame"></span><br />
            <span class="player-desc"></span>
          </label>
        </li>
      </template>
    </div>
    <div slot="panel" id="cdms">
      <div id="list-wrapper">
        <h2>Registered Content Decryption Modules</h2>
        <ul>
          <li>Clear Key ("org.w3.clearkey") is always supported and not listed
            here.</li>
          <li>Empty video codec profile list means we are not differentiating
            and assume all profiles are supported.</li>
          <li>Codecs marked with "*" signals clear lead not supported.</li>
        </ul>
        <ul id="cdm-list" class="show-none-if-empty"></ul>
      </div>
      <template id="cdm-row">
        <li>
          <label class="cdm">
            <span class="key-system"></span><br />
            <span class="robustness"></span><br />
            <span class="name"></span><br />
            <span class="version"></span><br />
            <span class="path"></span><br />
            <span class="capability-status"></span><br />
            <span class="capability"></span><br />
          </label>
        </li>
      </template>
    </div>
  </cr-tab-box>
  <dialog id="clipboard-dialog">
    <p>Ctrl+C to copy to clipboard, unfocus to exit.</p>
    <textarea id="clipboard-textarea" rows="30" cols="80"></textarea>
  </dialog>
  <script type="module" src="media_internals.js"></script>
</body>
</html>
